import React, { useEffect, useState } from "react";
import { Button, Flex, Modal, Form, Select } from "antd";
import { useTranslation } from 'react-i18next';
import { DownOutlined } from '@ant-design/icons';
import UploadItem from '../../../Components/UploadItem';
import { ACCEPT_TYPE } from '../../../../utils/constant';

const ChooseImageModal = ({
  chooseImageModalVisable,
  setChooseImageModalVisable,
  isUploadImage,
  methodList,
  defaultValue,
  onConfirm
}) => {

  const { t } = useTranslation();
  const [form] = Form.useForm();
  const [initialData, setInitialData] = useState(defaultValue || {});
  const [fileList, setFileList] = useState([])
  useEffect(() => {
  }, []);

  const onSubmit = () => {
    form.validateFields().then(() => {
      const formData = form?.getFieldsValue();
      setChooseImageModalVisable(false)
      onConfirm(formData)
    }, () => {
      return false;
    });
  }
  return (
    <Modal
      title={isUploadImage ? t('search.searchImage') : t('search.chooseImage')}
      width={480}
      onCancel={() => setChooseImageModalVisable(false)}
      open={chooseImageModalVisable}
      footer={[
        <Button type="primary" onClick={onSubmit}>{t('common.confirm')}</Button>
      ]}>
      <Form form={form} initialValues={initialData}>
        {
          isUploadImage && (
            <Form.Item name="imageAttachment"
              rules={[
                {
                  required: true,
                  message: t('search.imageRequired'),
                }]}
              label=' ' required={false} labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
              <UploadItem
                btnText={t('search.searchImage')}
                acceptType={ACCEPT_TYPE.JPGTIF}
                maxCount={1}
                uploadModule='search'
                uploadName={"SEM"}
                uploadUpdateFn={(data) => {
                  console.log("🚀 ~ fileList:", data)
                  form.setFieldsValue({
                    imageAttachment: data,
                  });
                  // form.validateFields([listNames]);
                }}
                fileListData={initialData.imageAttachment}
              />
            </Form.Item>
          )
        }

        <Form.Item name="method"
          rules={[
            {
              required: true,
              message: t('common.selectRequired'),
            }]}
          label={t('search.method')} labelCol={{ span: 24 }} wrapperCol={{ span: 24 }}>
          <Select placeholder={t('common.pleaseSelect')} allowClear options={methodList} />
        </Form.Item>
      </Form>
    </Modal>
  )
};

export default ChooseImageModal;